<template>
  <el-container class="main-container">
    <!-- 侧边栏 -->
    <el-aside width="200px" class="side-menu">
      <div class="logo-container">
        <img src="@/assets/images/logo1.png"
          style="height: 20px; margin-left: 0px; margin-top: auto; margin-bottom: auto;">
        <!-- <span class="system-name">光影阁</span> -->
      </div>

      <!-- 导航菜单 -->
      <el-menu router :default-active="route.path" background-color="#FCFCFC" text-color="#000"
        active-text-color="#FFFFFF">
        <el-menu-item index="/back/home">
          <el-icon>
            <House />
          </el-icon>
          <span>工作台</span>
        </el-menu-item>
        <el-menu-item index="/back/statistics">
          <el-icon>
            <DataLine />
          </el-icon>
          <span>数据统计</span>
        </el-menu-item>
        <el-menu-item index="/back/order">
          <el-icon>
            <Tickets />
          </el-icon>
          <span>订单管理</span>
        </el-menu-item>
        <el-menu-item index="/back/product">
          <el-icon>
            <Goods />
          </el-icon>
          <span>产品管理</span>
        </el-menu-item>
        <el-menu-item index="/back/classify">
          <el-icon>
            <Grid />
          </el-icon>
          <span>分类管理</span>
        </el-menu-item>
        <el-menu-item index="/back/carousel">
          <el-icon>
            <Picture />
          </el-icon>
          <span>轮播图管理</span>
        </el-menu-item>
        <el-menu-item index="/back/staff">
          <el-icon>
            <Suitcase />
          </el-icon>
          <span>员工管理</span>
        </el-menu-item>
        <el-menu-item index="/back/user">
          <el-icon>
            <User />
          </el-icon>
          <span>用户管理</span>
        </el-menu-item>
       
      </el-menu>
    </el-aside>

    <el-container>
      <!-- 顶部栏 -->
      <el-header class="header-bar">
        <div class="header-left">
          <el-breadcrumb separator="/">
            <el-breadcrumb-item v-for="(item, index) in breadcrumbList" :key="index" :to="item.path">
              {{ item.title }}
            </el-breadcrumb-item>
          </el-breadcrumb>
        </div>
        <div class="user-panel">
          <el-input v-model="input2" style="width: 240px" placeholder="Please Input">
            <template #suffix>
              <el-icon class="el-input__icon">
                <Search />
              </el-icon>
            </template>
          </el-input>
          <div class="topicon">
            <el-icon :size="40">
              <ChatDotRound />
            </el-icon>
          </div>

          <el-dropdown>
            <div class="user-info">
              <el-avatar :size="40" :src="fileBaseUrl() + adminStore.adminInfo.photographer.avatarUrl"
                :preview-src-list="fileBaseUrl() + adminStore.adminInfo.photographer.avatarUrl" class="user-avatar" />
              <span class="user-name">{{ adminStore.adminInfo.photographer.name }}</span>
              <el-icon>
                <CaretBottom />
              </el-icon>
            </div>
            <template #dropdown>
              <el-dropdown-menu>
                <el-dropdown-item @click="router.push('/detail')">个人中心</el-dropdown-item>
                <el-dropdown-item divided @click="logout">退出登录</el-dropdown-item>
              </el-dropdown-menu>
            </template>
          </el-dropdown>
        </div>
      </el-header>

      <!-- 主内容区 -->
      <el-main class="main-content">
        <router-view></router-view>
      </el-main>
    </el-container>
  </el-container>
</template>

<script setup>
import { ref, onMounted, watch } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import {useAdminStore} from '@/stores/adminStore'
import { fileBaseUrl } from '@/apis/files'
const router = useRouter()
const route = useRoute()
const adminStore=useAdminStore()



// 面包屑数据
const breadcrumbList = ref([])

// 更新面包屑
const updateBreadcrumb = () => {
  const matched = route.matched
  const breadcrumb = []

  matched.forEach(item => {
    if (item.meta && item.meta.breadcrumb) {
      item.meta.breadcrumb.forEach((title, index) => {
        breadcrumb.push({
          title,
          path: index === 0 ? '/back/home' : route.path
        })
      })
    }
  })

  breadcrumbList.value = breadcrumb
}

// 监听路由变化
watch(() => route.path, () => {
  updateBreadcrumb()
}, { immediate: true })

// 退出登录
const logout = () => {
  localStorage.removeItem("user")
  router.push("/adminlogin")
}

</script>

<style lang="less" scoped>
.main-container {
  height: 100vh;

  .side-menu {
    background: #FCFCFC;
    transition: width 0.3s;

    .logo-container {
      height: 60px;
      display: flex;
      align-items: center;
      padding: 0 15px;
      background: #FCFCFC;

      .logo {
        width: 32px;
        height: 32px;
        margin-right: 10px;
        border-radius: 32px;
      }

      .system-name {
        color: #000;
        font-size: 18px;
        font-weight: 600;
      }
    }

    .el-menu {
      border-right: none;
    }
  }

  .header-bar {
    height: 60px;
    display: flex;
    align-items: center;
    position: relative;
    background: #FCFCFC;
    // box-shadow: 0 1px 4px rgba(0, 21, 41, 0.096);

    
    .el-breadcrumb {
      font-size: 17px;
      font-weight: 700;
      :deep(.el-breadcrumb__item:last-child .el-breadcrumb__inner, .el-breadcrumb__item:last-child .el-breadcrumb__inner a, .el-breadcrumb__item:last-child .el-breadcrumb__inner a:hover, .el-breadcrumb__item:last-child .el-breadcrumb__inner:hover){
        color: #000;
       
      }
    }

    .user-panel {
      position: absolute;
      right: 10px;
      display: flex;
      align-items: center;
      gap: 20px;
    }

    :deep(.el-input__wrapper) {
      border-radius: 20px;
      height: 40px;
      box-shadow: 0 1px 4px rgba(0, 21, 41, 0.096);

      .el-input__icon {
        font-size: 23px;
        color: #000;
      }
    }

    .topicon {
      .el-icon {
        background-color: #fff;
        color: black;
        padding: 8px;
        border-radius: 20px;
        box-shadow: 0 1px 4px rgba(0, 21, 41, 0.096);
      }
    }

    .user-info {
      display: flex;
      align-items: center;
      cursor: pointer;

      .user-avatar {
        margin-right: 10px;
      }

      .user-name {
        margin-right: 8px;
        font-size: 14px;
      }
    }
  }

  .main-content {
    background: #FCFCFC;
    padding: 0px;
    max-height: calc(100vh - 60px);
  }
}

.el-aside {
  padding: 10px;
}

.el-menu-item:focus,
.el-menu-item:hover {
  background-color: #3d3d3d !important;

  color: #fff !important;

}



.el-menu-item {
  border-radius: 10px !important;
  margin-top: 5px;
}

.el-menu .is-active {
  background-color: #000000 !important;
  border-radius: 10px;
  color: #fff !important;
}

.el-sub-menu .el-menu-item {
  min-width: 160px;
  border-radius: 10px;
  margin-top: 5px;
}
</style>
